<template>
	<view class="page">

		<view class="search_1">
			<view @click="gosearch" class="ipt_1" type="text" value="" />
		</view>

		<image class="img_1" src="../../static/users/search.png" mode=""></image>
         <view class="banner">
		<u-swiper width="690" height="300" interval="3000" :effect3d="true"  effect3d-previous-margin="0" mode="dot" @click="jump" border-radius="40" :list="list" ></u-swiper>
         </view>
		 
		<u-tabs :list="lists" :current="current" bg-color="#F2F3F9" active-color="#181818" inactive-color="#181818"
			@change="change"></u-tabs>

		<view class="back">
			<view class="text1">
				宿舍楼
				<image class="image_lou" src="../../static/users/sushe.png" mode="aspectFill"></image>
			</view>

			<view class="xian">

			</view>

			<view class="text2">
				销量
				<image class="image_xiao" src="../../static/users/xiaoliang.png" mode="aspectFill"></image>
			</view>

		</view>
		<!-- 推荐 -->
		<view v-if="current==0">
			<view class="shop_jian"  v-for="(item,index) in menu" @click="jumpshop(index)">
				<view class="title">
					鬼灭之刃动漫店 {{item}}
				</view>
				<image src="../../static/users/vip.png" class="vip_img" mode="aspectFill"></image>
				<image src="../../static/users/shop.png" class="shop_img" mode="aspectFill"></image>
				<view class="area">
					7号宿舍楼505
				</view>
				<view class="concent">
					只卖关于动漫一切周边，欢迎喜爱动漫的二刺猿光临小店，这里有海、手办、cos道具服装等...
				</view>
				<view class="youhui">
					<view class="youhui_one">
						10减5
					</view>
					<view class="fenge_xian"></view>
					<view class="youhui_two">
						45减10
					</view>
				</view>
				<view class="start_time">
					营业：08:00-22:00
				</view>
				<view class="liang">
					销量:2366
				</view>
			</view>
		</view>
		<!-- 其他 -->
		<view v-if="current==1">
			222
		</view>

		<view v-if="current==2">
			333
		</view>

		<view v-if="current==3">
			444
		</view>

		<view v-if="current==4">
			555
		</view>


	</view>
</template>
<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				lists: [{
					name: '推荐'
				}, {
					name: '佩饰'
				}, {
					name: '美妆',
				}, {
					name: '潮流',
				}, {
					name: '运动',
				}, {
					name: '服装',
				}, {
					name: '佩饰'
				}, {
					name: '美妆',
				}, {
					name: '潮流',
				}, {
					name: '运动',
				}, {
					name: '服装',
				}],
				current: 0,
				menu:[1,2,3,4,5,6,7,8,9],
				list: [{
						image: "../../static/users/banner1.png"
					},
					{
						image: "https://cdn.uviewui.com/uview/swiper/1.jpg"
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg'
					}
				]
			}
		},
		methods: {
			change(index) {
				console.log(index);
				this.current = index;
			},
			jump(index){
				console.log(index);
				uni.navigateTo({
					url:"../banner/banner?id="+index
				})
			},
			jumpshop(index){
				uni.navigateTo({
					url:"../shop/shop?id="+index
				})
			},
			gosearch(){
				uni.navigateTo({
					url:"../search/search"
				})
			}
		}
	}
</script>
<style lang="scss">
	.page {
		position: relative;
	}
    .banner{
		margin: 30rpx;
		width: 690rpx;
	}
	page {
		background-color: #F2F3F9;
	}

	.vip_img {
		position: absolute;
		top: 79rpx;
		left: 150rpx;
		width: 60rpx;
		height: 30rpx;
		z-index: 5;
	}

	.search_1 {
		margin: 40rpx 0 0 30rpx;
		width: 500rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
	}

	.ipt_1 {
		line-height: 80rpx;
		height: 80rpx;
		margin: 0rpx 0 0 25rpx;
	}

	.img_1 {
		position: absolute;
		right: 50rpx;
		top: 23rpx;
		width: 34rpx;
		height: 34rpx;
	}

	swpier swiper-item {
		height: 400rpx;
	}

	uni-swiper {
		margin: 30rpx 0 0 30rpx;
		height: 318px;
		width: 690rpx;
		height: 300rpx;
	}

	.banner_img1 {
		width: 690rpx;
		height: 300rpx;
		border-radius: 40rpx;
	}

	.back {
		margin: 10rpx 0 0 30rpx;
		width: 690rpx;
		height: 68rpx;
		background: #181818;
		border-radius: 34rpx;
		position: relative;
	}

	.text1 {
		margin-left: 53rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		line-height: 68rpx;
		position: relative
	}

	.text2 {
		position: absolute;
		left: 224rpx;
		top: -68rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		line-height: 68rpx;
		position: relative
	}

	.image_lou {
		position: absolute;
		top: 32rpx;
		left: 82rpx;
		width: 10rpx;
		height: 10rpx;
	}

	.image_xiao {
		position: absolute;
		top: 32rpx;
		left: 62rpx;
		width: 10rpx;
		height: 10rpx;
	}

	.xian {
		position: absolute;
		top: 19rpx;
		left: 184rpx;
		width: 1rpx;
		height: 30rpx;
		background: #FFFFFF;
	}

	.shop_jian {
		margin-left: 30rpx;
		width: 690rpx;
		height: 260rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		position: relative;
		margin-top: 20rpx;
		.title {
			margin: 29rpx 0 0 30rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #181818;
			line-height: 80rpx;
		}

		.shop_img {
			margin: 0rpx 0 0 30rpx;
			width: 180rpx;
			height: 150rpx;
			border-radius: 40rpx;
		}

		.area {
			position: absolute;
			right: 30rpx;
			top: 0rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #666666;
			line-height: 80rpx;
		}

		.concent {
			position: absolute;
			top: 92rpx;
			right: 31rpx;
			width: 429rpx;
			height: 56rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #181818;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.youhui {
			position: absolute;
			left: 229rpx;
			bottom: 80rpx;
			width: 160rpx;
			height: 28rpx;
			border: 1px solid #FF5252;
			border-radius: 14rpx;
			position: relative;

			.youhui_one {
				margin: 0rpx 0 0 16rpx;
				font-size: 19rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FF5252;
				line-height: 25rpx;
			}

			.youhui_two {
				position: absolute;
				top: 0;
				right: 16rpx;
				font-size: 19rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FF5252;
				line-height: 25rpx;
			}

			.fenge_xian {
				position: absolute;
				top: 5rpx;
				left: 74rpx;
				width: 1px;
				height: 18rpx;
				background: #FF5252;
			}
		}

		.start_time {
			position: absolute;
			bottom: 30rpx;
			left: 231rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.liang {
			position: absolute;
			bottom: 30rpx;
			right: 30rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}
</style>
